<template>
  <div class="collect-list">
    <van-nav-bar
      title="我的优惠券"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>
    <div class="van-coupon-list__exchange-bar">
      <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
        <div class="van-cell__value van-cell__value--alone van-field__value">
          <div class="van-field__body">
            <input type="text" v-model="code" placeholder="请输入优惠码" class="van-field__control"></div>
        </div>
      </div>
      <button disabled="disabled"
              class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
        <div class="van-button__content"><span class="van-button__text" @click="exchange">兑换</span></div>
      </button>
    </div>

    <van-tabs v-model="active">
      <van-tab :title="usedTitle">
        <coupon-list :list="coupons" :optional="false"/>
      </van-tab>
      <van-tab :title="unUsedTitle">
        <coupon-list :disable="true" :list="disabledCoupons"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import CouponList from '../../components/CouponList'
import {couponExchange, couponMyList} from '../../api/items'
import {Toast} from 'vant'

export default {
  name: 'collect',
  components: {CouponList},
  computed: {
    usedTitle () {
      return `可用(${this.coupons.length})`
    },
    unUsedTitle () {
      return `可用(${this.disabledCoupons.length})`
    }
  },
  created () {
    this.initData()
  },
  methods: {
    exchange () {
      couponExchange({code: this.code}).then(res => {
        Toast.success('兑换成功')
      })
    },
    back () {
      this.$router.back()
    },
    formatDate (time) {
      let date = new Date(time)
      let YY = date.getFullYear() + '-'
      let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD + ' ' + hh + mm + ss
    },
    initData () {
      couponMyList().then(res => {
        var cList = res.data.data.list
        this.coupons = []
        this.disabledCoupons = []
        for (var i = 0; i < cList.length; i++) {
          var c = cList[i]

          var coupon = {
            id: c.id,
            cid: c.cid,
            name: c.name,
            condition: '满' + c.min + '元可用',
            value: c.discount * 100,
            description: c.desc,
            startAt: this.formatDate(new Date(c.startTime).getTime()),
            endAt: this.formatDate(new Date(c.endTime).getTime()),
            valueDesc: c.discount,
            unitDesc: '元'
          }

          if (new Date(c.endTime) > new Date()) {
            this.coupons.push(coupon)
          } else {
            this.disabledCoupons.push(coupon)
          }
        }

        this.showCouponList = true
      })
    }
  },
  data () {
    return {
      code: '',
      active: 0,
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: []
    }
  }
}
</script>

<style scoped>
.collect-list {
  flex: 1;
  height: 100%;
}

.van-checkbox {
  display: none;
}
</style>
